<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="学期设置"></title>
    <!--<link rel="stylesheet" th:href="@{/layui/css/layui.css}">-->
</head>
<style>
    .layui-form-item .layui-inline {
        margin-bottom: 5px;
        margin-right: 0;
    }
</style>
<body>
<div class=""><!--layui-container-->
    <div class="layui-fluid " style="background:#fcf9f9;">
        <div class="layui-row layui-col-space15">
            <!--搜索框-->
            <form class="layui-form layui-form-pane" lay-filter="term-form">
                <div class="layui-form-item">
                    <div class="layui-card">
                        <div class="layui-card-header">搜索框</div>
                        <div class="layui-card-body layui-row layui-col-space1">
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">学期名：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" name="termname" placeholder="请输入学期名">
                                </div>
                            </div>
                            <div class="layui-btn-group layui-inline">
                                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="term-form-submit">查询
                                </button>
                                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!--头工具栏和行工具栏 数据表格-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <!--<div class="layui-card-header">外籍学生列表</div>-->
                <div class="layui-card-body">
                    <script type="text/html" id="rowtool">
                        {{#  if(d.iscurrent == 1){ }}
                        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="operation">修改</a>
                        <!--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>-->
                        {{# } }}
                    </script>
                    <script type="text/html" id="toolbar">
                        <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加</a>
                    </script>
                    <table class="layui-hide" id="term-table" lay-filter="term-table"></table>
                </div>
            </div>
        </div>
    </div>
    <!--    新增修改-->
    <script type="text/html" id="tagSetHtml">
        <body class="layui-layout-body">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane" lay-filter="verfbank" id="verfbank">
                    <!-- <input type="text" value="{{}}" > 参数测试-->
                    <!--<button type="button" class="layui-btn"> {{d.termname}}</button>-->
                    <input type="text" name="termid" value="{{ d.termid||'' }}" class="layui-hide">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:170px;">考核学期名：</label>
                            <div class="layui-input-inline">
                                <input type="text" maxlength="20" name="termname" autocomplete="off"
                                       placeholder="学期名" class="layui-input" value="{{d.termname||''}}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:170px;">考核起始时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" maxlength="20" name="starttime" autocomplete="off" id="starttime"
                                       placeholder="起始时间" class="layui-input" value="{{d.starttime||''}}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:170px;">考核结束时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" maxlength="20" name="endtime" autocomplete="off" id="endtime"
                                       placeholder="结束时间" class="layui-input" value="{{d.endtime||''}}">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </body>
    </script>
    <!-- 全局js -->
    <script>
        layui.use(['form', 'table', 'layer', 'laydate', 'laytpl'], function () {
            var $ = layui.$
                , element = layui.element
                , table = layui.table
                , layer = layui.layer
                , laydate = layui.laydate
                , laytpl = layui.laytpl
                , form = layui.form;
            var initData = {"termid": ""};
            debugger
            // 提交按钮监听
            form.on('submit(term-form-submit)', function (data) {
                // layer.msg(JSON.stringify(data.field));
                table.reload('term-table', {where: data.field}); //表格重载
                return false;
            });

            //表格渲染
            table.render({
                elem: '#term-table'
                , url: '/student/pageGet'
                , cellMinWidth: 80
                , toolbar: '#toolbar'
                , cols: [
                    [
                        //{type: 'numbers', fixed: "left"}
                        {field: 'termid', hide: true}
                        , {field: 'termname', title: '学期名称'}
                        , {field: 'starttime', title: '起始时间'}
                        , {field: 'endtime', title: '结束时间'}
                        , {
                        field: 'iscurrent', title: '是否当前学期', templet: function (d) {
                            return d.iscurrent === 1 ? "是" : "否"
                        }
                    }
                        , {title: '操作', toolbar: '#rowtool', width: 120, align: "center", fixed: "right"}
                    ]
                ]
                , id: "term-table"
                , page: true
            });

            //表头监听
            table.on('toolbar(term-table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                if (obj.event === 'add') {
                    // layer.msg("新增");
                    initData = {"termid": ""};
                    var getTpl = tagSetHtml.innerHTML;
                    laytpl(getTpl).render(initData, function (html) {
                        layer.open({
                            type: 1,
                            title: "学期新增",
                            anim: 0,
                            area: ['450px', '400px'],
                            content: html
                            , btn: ['&nbsp;&nbsp;保存&nbsp;&nbsp;', '&nbsp;&nbsp;关闭&nbsp;&nbsp;'] //只是为了演示
                            , yes: function (index, layero) {
                                $.ajax({
                                    url: "/setTerm/saveOrUpdate",
                                    method: "POST",
                                    data: $('#verfbank').serialize(),
                                    async: false,
                                    success: function (result) {
                                        layer.msg(result.message)
                                        table.reload('term-table');
                                        layer.close(index);
                                    }
                                });
                            }
                        });
                        // 初始化日期选择器
                        initdatesel();
                        form.render();
                    });
                }
            });

            // 行工具栏监听
            table.on('tool(term-table)', function (RowObj) {
                var data = RowObj.data;
                if (RowObj.event === 'operation') {
                    $.ajax({
                        url: "/setTerm/selectOne",
                        data: {"id": data.termid},
                        async: false,
                        success: function (result) {
                            if (typeof result.data === "object") {
                                initData = result.data;
                            }
                        }
                    });
                    var getTpl = tagSetHtml.innerHTML;
                    laytpl(getTpl).render(initData, function (html) {
                        layer.open({
                            type: 1,
                            title: "学期修改",
                            anim: 0,
                            area: ['450px', '400px'],
                            content: html
                            , btn: ['&nbsp;&nbsp;保存&nbsp;&nbsp;', '&nbsp;&nbsp;关闭&nbsp;&nbsp;'] //只是为了演示
                            , yes: function (index, layero) {
                                $.ajax({
                                    url: "/setTerm/saveOrUpdate",
                                    method: "POST",
                                    data: $('#verfbank').serialize(),
                                    async: false,
                                    success: function (result) {
                                        layer.msg(result.message)
                                        table.reload('term-table');
                                        layer.close(index);
                                    }
                                });
                            }
                        });

                    });
                    // 初始化日期选择器
                    initdatesel();
                    form.render();
                } else if (RowObj.event === 'del') {
                    layer.confirm("是否确认删除？", function () {
                        $.ajax({
                            url: "/basetermaccount/del",
                            data: {"id": data.termid},
                            async: false,
                            success: function (result) {
                                layer.msg(result.message)
                                table.reload('term-table');
                            }
                        });
                    })
                }
            });

            function initdatesel() {
                // 日期渲染
                laydate.render({
                    elem: '#starttime' //指定元素
                });
                // 日期渲染
                laydate.render({
                    elem: '#endtime' //指定元素
                });
            }

            form.render();
        });
    </script>
</div>
</body>
</html>